<template>
  <div class="edit-header">
    <div class="header-l">
      <div v-for="group in itemGroups" :key="group.name" class="group">
        <el-tooltip v-for="item in group.items" :key="item.name" class="item" effect="dark" :content="item.label" placement="bottom">
          <el-button :disabled="invalid(item.name)" class="command" @click="click(item.name)">
            <el-icon>
              <component :is="item.name"></component>
            </el-icon>
          </el-button>
        </el-tooltip>
        <div class="divider" />
      </div>
    </div>
    <div class="header-r">
      <el-button @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, computed } from 'vue';
const props = defineProps({
  itemGroups: {
    type: Array,
    default: function () {
      return [
        {
          name: 'edit',
          items: [
            // {
            //   label: '复制',
            //   name: 'copy'
            // },
            // {
            //   label: '粘贴',
            //   name: 'paste'
            // },
            {
              label: '删除',
              name: 'delete'
            }
          ]
        },
        // {
        //   name: 'group',
        //   items: [
        //     {
        //       label: '添加组',
        //       name: 'addGroup'
        //     },
        //     {
        //       label: '取消组',
        //       name: 'ungroup'
        //     }
        //   ]
        // }
      ]
    }
  },
  actives: {
    type: Object,
    default: function () {
      return {
        copy: false,
        paste: false,
        delete: false,
        addGroup: false,
        ungroup: false
      }
    }
  }
})

const emit = defineEmits(['tarbar-action', 'submit'])

function invalid(name) {
  return !props.actives[name]
}
//
const click = function (name) {
  emit('tarbar-action', name)
}
// submit
const submit = function(){
  emit('submit')
}
</script>
<style lang="scss" scoped>
.edit-header {
  height: 35px;
  background-color: #fff;
  border-bottom: 1px solid #aabbc3;
  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
  box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
  z-index: 3;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  .header-l {
    padding: 8px;
    .group {
      display: inline-block;
      .command {
        padding: 8px 8px;
        border: 1px solid #fff;
        margin-left: 0;
      }
      .divider {
        display: inline-block;
        width: 1px;
        height: 1em;
        margin: 0 8px;
        vertical-align: middle;
        position: relative;
        background-color: #dcdfe6;
      }
    }
  }
}
</style>